<template>
  <div id="box">
    <el-container>
      <el-header>
        <span>新增管理员</span>
        <a class="right return" @click="back" href="javascript:;"><返回</a>
      </el-header>
      <div id="content">
        <p class="jiben">基本信息</p>
        <ul class="left">
          <li>
            <p>名字</p>
            <el-input v-model="name" placeholder="用户名"></el-input>
          </li>

          <li>
            <p>登录密码</p>
            <el-input
              v-model="password"
              placeholder="设置系统登录密码"
            ></el-input>
          </li>
          <li>
            <p>确认密码</p>
            <el-input
              v-model="confirm"
              placeholder="再次输入登录密码"
            ></el-input>
          </li>
          <li>
            <p>头像照片</p>
            <!-- <div class="img" v-model="fileList">
                          <img src="../assets/test.jpg" alt="" />
                        </div> -->
            <!-- <el-upload
                          :on-preview="handlePreview"
                          action="http:/qm53j0ifc.hn-bkt.clouddn.com"
                          multiple
                          :file-list="fileList"
                        >

                          <el-button size="small" type="primary" >选择照片</el-button> -->
            <div slot="tip" class="el-upload__tip">
              单上传头像图片大小不能超过 2MB!,仅支持JPG、JPEG、PNG格式
            </div>
            <!-- </el-upload> -->
            <div id="upload">
              <el-upload
                class="avatar-uploader"
                action="/image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                name="uploadFile"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </li>
        </ul>
        <ul class="right">
          <li>
            <p>联系电话</p>
            <el-input v-model="phone" placeholder="联系电话" ></el-input>
          </li>

          <li>
            <p>电子邮件</p>
            <el-input v-model="email" placeholder="电子邮件" ></el-input>
          </li>
        </ul>
        <div id="jurisdictionBox">
          <p>权限选择</p>
          <!-- <el-checkbox
                      :indeterminate="isIndeterminate"
                      v-model="checkAll"
                      @change="handleCheckAllChange"
                      >全选</el-checkbox
                    > -->
          <div style="margin: 15px 0"></div>
          <!-- <el-checkbox-group
                      v-model="checkedjurisdictions"
                      @change="handleCheckedjurisdictionsChange"
                    >
                      <el-checkbox
                        v-for="jurisdiction in jurisdictions"
                        :label="jurisdiction.name"
                        :key="jurisdiction.name"
                        v-model="privilegecount"
                        >{{ jurisdiction.name }}</el-checkbox
                      >
                    </el-checkbox-group> -->
          <!-- <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选
          </el-checkbox> -->
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="city in cities"
              :label="city"
              :key="city"
              data-id=""
              >{{ city }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </el-container>
    <div id="footBox">
      <div id="footer">
        <el-button type="info" @click="cancle" :plain="true">取消</el-button>
        <el-button type="success" @click="baocun" :plain="true">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
let cityOptions = [];
export default {
  name: "addAdmin",
  data: function () {
    return {
      imageUrl: "", //图片地址
      name: "", //管理员姓名
      phone: "", //联系方式
      password: "", //登录密码
      email: "", //邮件
      confirm: "", //确认密码
      // checkAll: false, //权限选择
      checkedjurisdictions: [],
      jurisdictions: [], //权限列表
      jurisdictions2: [], //权限列表
      // isIndeterminate: true, //默认选中权限
      privilegecount: [], //这个数据里面放选中权限的id
      value: "",
      checkAll: false,
      checkedCities: [], //选中数据可以勾选
      cities: cityOptions,
      isIndeterminate: true,
      ids: [],
    };
  },
  methods: {
    //手机号验证
            phoneyz() {
                var reg = /^1[3-9]\d{9}$/;
                if (!reg.test(this.phone)) {
                    this.$message.error('手机格式不正确，请重新输入！');
                }
            },

            //邮箱验证
            emailyz() {
                //邮箱正则
                var emreg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!emreg.test(this.email)) {
                    this.$message.error('邮箱格式不正确，请重新输入！');
                }
            },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      this.checkedCities = value;
    },

    handlePreview(file) {
      console.log(file);
    },
    mounted() {
      console.log(this.options[0].value);
    },
    back() {
      this.$router.go(-1);
    },

    //上传图片
    handleAvatarSuccess(res, file) {
      sessionStorage.imgurl = res.data;
      this.imageUrl = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    //取消
    cancle() {
      this.$confirm("检测到有未保存的内容，确认是否离开？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "保存",
        cancelButtonText: "离开",
      })
        .then(() => {
          this.baocun();
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          });
          this.$router.push("/administrator");
        });
    },
    //保存
    baocun() {
      if (this.name == "" || this.password == "") {
        this.$message({
          showClose: true,
          message: "请填写完整信息！",
          type: "warning",
        });
      } else {
        for (var i = 0; i < this.checkedCities.length; i++) {
          if (this.checkedCities[i] == "课程管理") {
            this.checkedCities[i] = 1;
          } else if (this.checkedCities[i] == "教师管理") {
            this.checkedCities[i] = 2;
          } else if (this.checkedCities[i] == "部门管理") {
            this.checkedCities[i] = 3;
          } else if (this.checkedCities[i] == "管理员管理") {
            this.checkedCities[i] = 4;
          } else if (this.checkedCities[i] == "图书管理") {
            this.checkedCities[i] = 5;
          } else if (this.checkedCities[i] == "学生管理") {
            this.checkedCities[i] = 6;
          }
        }

        this.$axios({
          url: "/manager/add",
          method: "post",
          data: {
            email: this.email,
            imageUrl: this.imageUrl,
            managerName: this.name,
            password: this.password,
            phone: this.phone,
            privilege_ids: this.checkedCities,
          },
        })
          .then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.$router.push("/administrator");
            } else {
              this.$message.error(`${res.data.msg}`);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    privilege() {
      if (cityOptions.length == 0) {
        this.$axios({
          url: "/privilege/list",
        })
          .then((res) => {
            console.log(res);
            for (var i = 0; i < res.data.data.length; i++) {
              cityOptions.push(res.data.data[i].name);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        cityOptions = this.cityOptions;
      }
    },
  },
  mounted() {
    this.privilege();
  },
};
</script>

<style scoped lang="less">
@contentbgcolor: white;
@margin: 10px;

ul {
  padding: 0;
}

a {
  text-decoration: none;
  color: #333333;
}
.return {
  color: #333;
  float: right;
  font-size: 18px;
  cursor: pointer;
}

.return:hover {
  color: #8cc5ff;
}
li {
  list-style: none;
  margin-top: 15px;

  p {
    margin: 0;
  }
}

#box {
  background: #f2f2f6;
}

.el-container {
  margin: 0;
  padding: 0;
}

.el-header {
  margin-top: 20px;
  background-color: rgb(242, 242, 246);
  color: #333;
  text-align: left;
  line-height: 60px;
  font-size: 20px;

  .right {
    float: right;
    margin-right: 10px;
  }
}

#content {
  background: @contentbgcolor;
  margin-top: 10px;

  .jiben {
    margin-left: 10px;
  }

  .left {
    float: left;
    margin-left: @margin;

    #upload {
      width: 178px;
      height: 178px;
      border: 1px dashed #6b6767;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload {
      border: 1px dashed #cfa1a1;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #587397;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }

  .right {
    float: right;
    margin-right: @margin;
  }

  .el-input,
  .el-select {
    width: 610px;
    height: 50px;
  }
}

#footBox {
  width: 100%;
  height: 350px;
  background: white;
}

#footer {
  margin-left: 43%;
  height: 200px;

  .el-button {
    float: left;
    margin-top: 100px;
  }
}

#jurisdictionBox {
  width: 300px;
  height: 200px;
  float: right;
}
</style>